<template>
  <div class="container">
    <div class="index-swiper" v-swiper:indexSwiper="indexSwiperOption">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="(item, index) in bannerData"
          :key="index"
        >
          <div class="swiper-box">
            <img
              :src="$store.state.isMobile ? item.wap_thumb : item.thumb"
              alt=""
              class="banner-swiper"
              v-if="item.thumb"
            />
            <video
              width="100%"
              height="100%"
              controls="false"
              muted
              loop
              autoplay
              :src="item.video"
              v-if="item.video"
            ></video>
            <div class="text-box animated fadeInUp" v-show="index == aniIndex">
              <p
                class="info"
                :style="{
                  color: item.desc_color,
                  fontSize: item.desc_size + 'rem',
                }"
              >
                {{ item.desc }}
              </p>
              <p
                class="title"
                :style="{
                  color: item.title_color,
                  fontSize: item.title_size + 'rem',
                }"
              >
                {{ item.title }}
              </p>
              <el-button
                type="primary"
                class="btn-more"
                :style="{
                  color: item.title_color,
                  border: '1px solid' + item.title_color,
                }"
                @click="openUrl(item.url)"
                v-if="item.title"
              >
                {{ $t("了解更多") }}
                <i class="el-icon-arrow-right"></i>
              </el-button>
              <el-button
                type="primary"
                class="btn-more-mobile"
                :style="{
                  color: item.title_color,
                  border: '1px solid' + item.title_color,
                }"
                @click="openUrl(item.url)"
                v-if="item.title"
              >
                • {{ $t("了解更多") }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <div class="c_content">
      <div class="c_left">
        <div
          class="c_left_child"
          :class="{ c_left_child_active: current == menu.id }"
          v-for="menu in categoryData"
          :key="menu.id"
          @click="(current = menu.id), switchGoods(menu.id)"
        >
          <span>{{ menu.title }}</span>
          <img
            style="margin-left: auto; height: 15rem; width: 9rem"
            v-if="current == menu.id"
            src="~/assets/images/c_gengduo.png"
            alt=""
          />
        </div>
      </div>
      <div class="c_left-mobile">
        <div
          class="c_left_child"
          :class="{ c_left_child_active: current == menu.id }"
          v-for="menu in categoryData"
          :key="menu.id"
          @click="(current = menu.id), switchGoods(menu.id)"
        >
          {{ menu.title }}
        </div>
      </div>
      <div class="c_right">
        <div class="c_type">
          <img
            class="r_banner"
            :src="categoryData[currentIndex].product_thumb"
            @click="
              $router.push({
                path: $i18n.path('chanpinluodi'),
                query: { id: categoryData[currentIndex].id },
              })
            "
          />
          <div class="c_typeview">
            <div
              class="c_f3"
              :style="{
                color: categoryData[currentIndex].product_title_color,
                fontSize: categoryData[currentIndex].product_title_size + 'rem',
              }"
            >
              {{ categoryData[currentIndex].product_title }}
            </div>
            <div
              class="c_f4"
              :style="{
                color: categoryData[currentIndex].product_info_color,
                fontSize: categoryData[currentIndex].product_info_size + 'rem',
              }"
            >
              {{ categoryData[currentIndex].product_info }}
            </div>
            <NuxtLink
              class="c_a"
              :style="{
                color: categoryData[currentIndex].product_info_color,
                fontSize: categoryData[currentIndex].product_info_size + 'rem',
              }"
              :to="{
                path: $i18n.path('chanpinluodi'),
                query: {
                  id: categoryData[currentIndex].id,
                  title: categoryData[currentIndex].title,
                },
              }"
              exact
            >
              {{ $t("了解更多") }}>
            </NuxtLink>
          </div>
        </div>
        <div
          class="reight-item"
          v-for="item in goodsData"
          :key="item.id"
          @click="
            $router.push({
              path: $i18n.path('productDetail/' + item.id),
            })
          "
        >
          <img class="c_right_card_img" :src="item.thumb" alt="" />
          <div class="c_right_card_f2">{{ item.info }}</div>
          <div class="c_right_card_f1">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="c_content-mobile">
      <div
        class="reight-item"
        v-for="item in goodsData"
        :key="item.id"
        @click="
          $router.push({
            path: $i18n.path('productDetail/' + item.id),
          })
        "
      >
        <img class="c_right_card_img" :src="item.thumb" alt="" />
        <div class="c_right_card_f1">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      indexSwiperOption: {
        //顶部轮播图
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets",
        },
        loop: false,
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        slidesPerView: 1,
        spaceBetween: 0,
        speed: 800,
        on: {
          slideChangeTransitionEnd: function () {
            // console.log(this.realIndex, "this");
            that.aniIndex =
              this.activeIndex > that.bannerData.length ? 0 : this.realIndex;
          },
        },
      },
      aniIndex: 0,
    };
  },
  async asyncData({ $indexApi }) {
    const bannerData = await $indexApi.getBannerData({ position: "product" });
    const categoryData = await $indexApi.getcategoryList();
    const goodsData = await $indexApi.getGoods({
      category_id: categoryData.data[0].id,
      page: 1,
    });
    // console.log(categoryData.data);

    return {
      bannerData: bannerData.data,
      categoryData: categoryData.data,
      current: categoryData.data[0].id,
      goodsData: goodsData.data.list,
    };
  },
  methods: {
    openUrl(url) {
      window.open(url, "_blank");
    },
    async switchGoods(id) {
      const goodsData = await this.$indexApi.getGoods({
        category_id: id,
        page: 1,
      });
      this.goodsData = goodsData.data.list;
      var that = this;
      // console.log(id);
      this.categoryData.forEach(function (element, i) {
        // console.log(element);
        if (element.id === id) {
          that.currentIndex = i;
        }
      });
      // console.log(goodsData.data);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  background: #fafafa;
}

.index-swiper {
  width: 100%;

  :deep(.swiper-pagination-bullet) {
    width: 120rem;
    height: 3rem;
    border-radius: 2rem;
    background: #848e94;
    margin: 0 49rem;
  }
  :deep(.swiper-pagination-bullet-active) {
    background: #fff;
  }
  .swiper-pagination {
    width: 100%;
    bottom: 45rem;
  }

  .swiper-box {
    width: 100%;
    height: 800rem;
    overflow: hidden;
    position: relative;

    .banner-swiper {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .text-box {
      position: absolute;
      top: 250rem;
      left: 232rem;
      .info {
        font-size: 30rem;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #333333;
        margin: 0;
      }
      .title {
        font-size: 60rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin: 0;
        margin-top: 30rem;
      }
      .btn-more {
        background: transparent;
        border-radius: 6rem;
        font-size: 20rem;
        padding: 12rem 18rem;
        font-family: Source Han Sans CN;
        font-weight: 300;
        border: none;
        margin-top: 30rem;
        transition: 0.6s;
        &:hover {
          background: rgba(255, 255, 255, 0.8);
        }
      }
      .btn-more-mobile {
        display: none;
      }
    }
  }
}

.r_banner {
  width: 1300rem;
  height: 380rem;
  border-radius: 15rem;
  cursor: pointer;
  object-fit: cover;
}

.c_content {
  background: #f2f2f2;
  padding: 40rem 120rem 150rem 120rem;
  display: flex;
  gap: 60rem;

  .c_left {
    width: 260rem;
    height: 320rem;
    background: #fff;
    position: sticky;
    top: 200rem;
    margin-right: 60rem;
    border-radius: 20rem;

    .c_left_child {
      height: 80rem;
      text-align: center;
      font-size: 20rem;
      font-family: Source Han Sans CN;
      font-weight: 300;
      color: #999999;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding-left: 27rem;
      padding-right: 84rem;
      transition: 0.3s;
      text-align: left;
    }

    .c_left_child_active {
      font-size: 20rem;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #333333;
    }
  }

  .c_right {
    width: 1300rem;
    display: flex;
    flex-wrap: wrap;
    gap: 40rem;

    .c_type {
      width: 100%;
      height: 400rem;
      position: relative;
      margin-bottom: 20rem;
      border-radius: 20rem;
      overflow: hidden;

      &:hover {
        .c_type_img {
          transform: scale(1.2);
        }
      }

      .c_type_img {
        width: 100%;
        height: 100%;
        transition: 0.6s;
      }

      .c_typeview {
        position: absolute;
        top: 0;
        left: 100rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .c_f3 {
          font-size: 40rem;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
        }

        .c_f4 {
          font-size: 20rem;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #333333;
          margin: 19rem 0 33rem 0;
        }

        .c_a {
          font-size: 20rem;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #333333;
        }

        .c_a:hover {
          font-size: 20rem;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #2ca2f1 !important;
          text-decoration: underline;
        }
      }
    }

    .reight-item {
      width: 405rem;
      height: 460rem;
      background: #ffffff;
      overflow: hidden;
      border-radius: 20rem;
      margin-bottom: 20rem;
      text-align: center;
      cursor: pointer;
      &:hover {
        .c_right_card_img {
          transform: scale(1.2);
        }
      }

      .c_right_card_img {
        width: 300rem;
        height: 300rem;
        margin-top: 40rem;
        transition: 0.6s;
      }

      .c_right_card_f1 {
        font-size: 24rem;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
        margin-top: 18rem;
      }

      .c_right_card_f2 {
        margin-top: 18rem;
        font-size: 16rem;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #999999;
      }
    }
  }
}
.c_left-mobile,
.c_content-mobile {
  display: none;
}

@media (max-width: 900px) {
  .container {
    background: #fff;
  }
  .index-swiper {
    :deep(.swiper-pagination-bullet) {
      width: 21px;
      height: 1px;
      background: #606568;
      border-radius: 0px;
      margin: 0 18px;
    }
    :deep(.swiper-pagination-bullet-active) {
      background: #fff;
    }
    .swiper-pagination {
      bottom: 20px;
    }

    .swiper-box {
      height: auto;

      .banner-swiper {
        width: 100%;
        height: 300px;
        object-fit: cover;
      }
      .text-box {
        position: absolute;
        top: 20%;
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        .info {
          font-size: 26px !important;
        }
        .title {
          font-size: 21px !important;
          margin: 15px 0;
        }
        .btn-more {
          display: none;
        }
        .btn-more-mobile {
          display: inline-block;
          width: 105px;
          height: 35px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #333333;
          border-radius: 35px;
          background-color: rgba(0, 0, 0, 0);
          padding: 0;
        }
      }
    }
  }

  .c_content {
    padding: 8px 10px;
    margin-bottom: 10px;
    overflow-x: auto;
    margin-top: -4px;
    .c_left,
    .c_right {
      display: none;
    }
    .c_left-mobile {
      display: flex;
      gap: 21px;
      overflow-y: scroll;
      .c_left_child {
        height: 26px;
        padding: 8px 10px;
        display: grid;
        place-items: center;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        white-space: nowrap;
      }
      .c_left_child_active {
        color: #4660ff;
      }
    }
    .c_left-mobile::-webkit-scrollbar {
      display: none;
    }
  }
  .c_content-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 10px;
    gap: 4px;
    padding-bottom: 14px;
    margin-top: 50px;
    .reight-item {
      height: 208px;
      background: #fff;
      border: 1px solid #f2f3f7;
      border-radius: 7px;
      display: flex;
      flex-direction: column;
      padding: 14px 0 19px;
      box-sizing: border-box;
      gap: 18px;
      box-shadow: 4px 4px 4px #f2f3f7;
      .c_right_card_img {
        width: 100%;
        flex: 1;
        object-fit: cover;
        max-height: 80%;
      }
      .c_right_card_f1 {
        text-align: center;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
      }
    }
  }
}
</style>
